<template>
	<view class="box">
		<view class="child">
			<!-- 顶部基本信息区 -->
			<view class="top-info">
				<uni-section title="饶梦娇" sub-title="高级助教" type="line">
					<template #right>
						<view class="flex-row-align-center right-box">
							<uni-icons type="phone-filled" color="#00aaff" size="18"></uni-icons>
							<view class="time">最早可约 今天10:00</view>
						</view>
					</template>
					<view class="intro-box">我是一个很爱笑的女孩，性格开朗乐观，擅长xxx，照片是本人，期待给您带来愉快的体验</view>
				</uni-section>
			</view>
			<!-- 中间照片 -->
			<view class="imgs">
				<template v-for="(item, index) of photos" :key="index">
					<image :src="item" mode="widthFix"></image>
				</template>
			</view>
			<!-- fixed立即预约按钮 -->
			<view class="btn-reserve fixed">
				<button type="primary" plain @click="goPay">立即预约</button>
			</view>
		</view>

		<!-- 评论列表视图 -->
		<view class="comment-list">
			<uni-section type="line" title="相关评价(20)">
				<view class="inner-box">
					<template v-for="(item, index) of 4" :key="index">
						<view class="item-box">
							<!-- 评价时间 -->
							<view class="head-box flex-row-between-center">
								<view class="left-name">匿名用户</view>
								<view class="right-time">
									<uni-dateformat date="2024-10-11 13:23:34" format="yyyy-MM-dd hh-mm-ss"></uni-dateformat>
								</view>
							</view>
							<view class="rate-box flex-row-align-center">
								<uni-rate size="20" :value="5" readonly></uni-rate>
								<view class="digit">5</view>
							</view>
							<view class="rec-content">小姐姐服务态度很好，一次很好的消费体验，会聊天，会提供情绪价值，好看身材好</view>
						</view>
					</template>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script setup>
  import {onLoad} from '@dcloudio/uni-app'
const photos = ['../../static/assistant.jpeg', '../../static/assistant.jpeg', '../../static/assistant.jpeg'];
// 接收id
onLoad((options)=>{
  console.log('助教id',options.id)
})
// 点击预约
function goPay() {
	uni.navigateTo({
		url: '/subpkg/pay-order/pay-order'
	});
}
</script>

<style lang="scss" scoped>
.box {
	background: $uni-bg-color-grey;
	overflow: hidden;
	margin-bottom: 80px;
	.child {
		margin: 20rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: $uni-border-radius-base;

		.top-info {
      overflow: hidden;
			.right-box {
				.time {
					margin-left: 10px;
				}
			}
			.intro-box {
				background: $uni-bg-color-grey;
				padding: 10rpx;
				margin-bottom: 30px;
				border-radius: $uni-border-radius-base;
				font-size: $uni-font-size-sm;
			}
		}

		// 照片区
		.imgs {
			image {
				width: 100%;
			}
		}

		.btn-reserve {
			padding: 20rpx 30rpx;
		}
	}
	.comment-list {
		margin: 20rpx;
		border-radius: $uni-border-radius-base;
		overflow: hidden;
		.inner-box {
			padding: 0 20rpx;
			.item-box {
				background: $uni-bg-color;
				border-bottom: 1px solid $uni-bg-color-grey;
				padding: 18rpx 0;
				.head-box {
					.right-time {
						color: $uni-text-color-grey;
					}
				}
				// 评分组件
				.rate-box {
					margin-top: 10rpx;
					margin-bottom: 20rpx;
					.digit {
						margin-left: 5px;
					}
				}
			}
		}
	}
}
</style>
